<template>
	<div class="quotaConversion">
		<van-nav-bar :border="false" :placeholder="true" :fixed="true" title="Trung tâm trợ giúp" left-arrow @click-left="onClickLeft"></van-nav-bar>
		<div class="quotaMain">
			<div class="card moneyBox quotaBox">
				<div class="moneyInfos">
					<div class="money">99,541,000</div>
					<div class="moneyText">
						<span>Số dư</span><i class="iconfont icon-icon_refresh_blue_12 refreshIcon"></i>
					</div>
				</div>
				<div class="moneyMiddle">
				</div>
				<div class="moneyInfos">
					<div class="money">99,541,000</div>
					<div class="moneyText">
						<span>Số dư chờ xử lí</span><i class="iconfont icon-icon_refresh_blue_12 refreshIcon"></i>
					</div>
				</div>
			</div>
			<div class="quotaList">
				<div class="getBack"><van-button type="info" size="mini">Ấn để chuyển về</van-button></div>
				<van-row :gutter="16">
					<van-col :span="8">
						<div class="quota">
							<div class="quotaName">
								<span>MG</span><span class="iconfont icon-icon_refresh_blue_12 refreshIcon"></span>
							</div>
							<div class="quotaMoney">0</div>
						</div>
					</van-col>
					<van-col :span="8">
						<div class="quota">
							<div class="quotaName">
								<span>MG</span><span class="iconfont icon-icon_refresh_blue_12 refreshIcon"></span>
							</div>
							<div class="quotaMoney">0</div>
						</div>
					</van-col>
					<van-col :span="8">
						<div class="quota">
							<div class="quotaName">
								<span>MG</span><span class="iconfont icon-icon_refresh_blue_12 refreshIcon"></span>
							</div>
							<div class="quotaMoney">0</div>
						</div>
					</van-col>
					<van-col :span="8">
						<div class="quota">
							<div class="quotaName">
								<span>MG</span><span class="iconfont icon-icon_refresh_blue_12 refreshIcon"></span>
							</div>
							<div class="quotaMoney">0</div>
						</div>
					</van-col>
					<van-col :span="8">
						<div class="quota">
							<div class="quotaName">
								<span>MG</span><span class="iconfont icon-icon_refresh_blue_12 refreshIcon"></span>
							</div>
							<div class="quotaMoney">0</div>
						</div>
					</van-col>
				</van-row>
			</div>
			<van-form class="quota-form" @submit="onSubmit">
				<div class="remindText">Chuyển ra</div>
				<van-field
				v-model="ravalue"
				placeholder="Chọn ví tiền chuyển ra"
				/>
				<div class="remindText">Chuyển vào</div>
				<van-field
				v-model="vaovalue"
				placeholder="Chọn ví tiền chuyển vào"
				/>
				<div class="remindText">Chọn nhanh tiền nạp</div>
				<ul class="rem-list">
					<li v-for="(item,index) in moneyList" :key="index" @click="mtab(item.value)"><div class="moneyList">{{item.label}}</div></li>
				</ul>
				<van-field
				v-model="npavalue"
				placeholder="Nhập số tiền cần chuyển"
				/>
				<div class="remindTransfer remindText">
					<i class="iconfont icon-icon_remind"></i><span>Không hỗ trợ chuyển tiền qua lại giữa các sảnh </span>
				</div>
				<div class="form-foot">
					<van-button round block type="info" native-type="submit"> Chuyển đổi ngay </van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				npavalue:'',
				ravalue:'',
				vaovalue:'',
				moneyList:[
					{
						label:'100K',
						value:'100,000'
					},
					{
						label:'500K',
						value:'500,000'
					},
					{
						label:'5M',
						value:'5000,000'
					},
					{
						label:'10M',
						value:'10000,000'
					},
					{
						label:'50M',
						value:'10000,000'
					},
					{
						label:'100M',
						value:'100000,000'
					},
					{
						label:'500M',
						value:'5000,000'
					},
					{
						label:'1B',
						value:'10000,000'
					},
					{
						label:'5B',
						value:'100000,000'
					},
					{
						label:'Toàn bộ',
						value:'535100,000'
					},
				]
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			mtab(e){
				this.npavalue = e
			},
			onSubmit(){
				
			}
			
		}
	}
</script>
<style>
</style>
